<template>
    <div id="regist" class="content">
        <!-- 提交成功提示框 -->
        <div class="weui-toast" v-if="successFlag">
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <p class="weui-toast__content">注册成功</p>
        </div>
        <!-- 页面标题 -->
        <div class="tilte-bar" v-if="user_type==='personalRegist'">个人用户注册</div>
        <div class="tilte-bar" v-if="user_type==='businessRegist'">企业用户注册</div>
        <!-- 用户注册公用部分 -->
        <div class="weui-cell weui-cell-background-color">
            <div class="weui-cell__hd"><label class="weui-label">登录名：</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="请输入登录名(必填)" v-model="registInputList.user_loginname">
            </div>
        </div>
        <div class="weui-cell weui-cell-background-color">
            <div class="weui-cell__hd"><label class="weui-label">密码：</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="password" placeholder="请输入6到12位密码(必填)" v-model="psw1">
            </div>
        </div>
        <div class="weui-cell weui-cell-background-color">
            <div class="weui-cell__hd"><label class="weui-label">确认密码：</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="password" placeholder="请再次输入密码(必填)" v-model="psw2">
            </div>
        </div>
        <!-- 个人用户注册 -->
        <template v-if="user_type==='personalRegist'">
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">姓名：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入姓名(必填)" v-model="registInputList.user_name">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">性别：</label></div>
                <div class="weui-cell__bd" >
                    <input class="radio-style" type="radio" id="man" value="man" v-model="registInputList.user_gender"><label class="radio-lable-style" for="man">男</label>
                    <input class="radio-style" type="radio" id="woman" value="woman" v-model="registInputList.user_gender"><label class="radio-lable-style" for="woman">女</label>
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">联系电话：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入联系电话(必填)" v-model="registInputList.phone_num">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">传真：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入传真" v-model="registInputList.fax_num">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">电子邮件：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入电子邮件" v-model="registInputList.email_address">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">个人住址：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入个人住址" v-model="registInputList.user_address">
                </div>
            </div>
        </template>
        <!-- 企业用户注册 -->
        <template v-if="user_type==='businessRegist'">
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">企业名：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入企业名(必填)" v-model="registInputList.user_name">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">企业法人：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入企业法人" v-model="registInputList.corporate">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">公司固定电话：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入公司固定电话" v-model="registInputList.fixed_telephone">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">联系人名字：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入联系人名字(必填)" v-model="registInputList.contact_people">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">联系电话：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入联系电话(必填)" v-model="registInputList.phone_num">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">传真：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入传真" v-model="registInputList.fax_num">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">电子邮件：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入电子邮件" v-model="registInputList.email_address">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">公司地址：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入公司地址" v-model="registInputList.user_address">
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color">
                <div class="weui-cell__hd"><label class="weui-label">统一社会信用代码：</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入统一社会信用代码(必填)" v-model="registInputList.uscc">
                </div>
            </div>
        </template>
        <!-- 下一步按钮 -->
        <div>
            <div v-if="warnning.tag" class="button-warnning">{{warnning.message}}</div>
            <span class="weui-btn weui-btn_primary margin-1" @click="sendRegist">注册</span>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // 登录提示信息的标志
                registTag: false,
                //密码和再次输入密码
                psw1: '', psw2: '',
                // 注册信息
                registInputList: {
                    user_loginname: '',
                    user_password: '',
                    // 用户名/企业名
                    user_name: '',
                    user_gender: '',
                    // 企业法人
                    corporate: '',
                    // 公司固定电话
                    fixed_telephone: '',
                    // 联系人名字, 
                    contact_people: '',
                    // 个人/企业联系人电话
                    phone_num: '',
                    // 传真
                    fax_num: '',       
                    email_address: '',  
                    user_address: '',
                    // 统一社会信用代码
                    uscc: '',
                    openId: localStorage.userOpenId,
                },
                //用户类型
                user_type: '',
                // 错误提示信息和标志
                warnning: {
                    tag: false,
                    message: ''
                },
                // 提交成功标志
                successFlag: false,
            }
        },
        mounted () {
            this.user_type = this.$route.params.user_type;
        },
        methods: {
            //调用注册接口
            sendRegist: function() {
                let _self = this;
                // 判断个人用户的所有必填项是否填完和企业用户的部分必填项
                if( !_self.registInputList.user_loginname || !_self.psw1 || !_self.psw2 || !_self.registInputList.user_name || !_self.registInputList.phone_num) {
                        _self.warnning.tag = true;
                        _self.warnning.message = '有必填项未填';
                } else {
                    // 判断企业用户的必填项是否填完
                    if(_self.user_type === 'businessRegist' && (!_self.registInputList.contact_people || !_self.registInputList.uscc)) {
                            _self.warnning.tag = true;
                            _self.warnning.message = '有必填项未填';
                    } else {
                        // 判断两次密码是否输入一致
                        if( _self.psw1 != _self.psw2 ) {
                            _self.warnning.tag = true;
                            _self.warnning.message = '两次密码输入不一致';
                        } else {
                            _self.registInputList.user_password = _self.psw1;
                            // 判断正则
                            let regxArray = [
                                {
                                    type: 'user_loginname',
                                    value: _self.registInputList.user_loginname,
                                    message: "用户名只能是字母或数字"
                                },
                                {
                                    type: 'user_password',
                                    value: _self.registInputList.user_password,
                                    message: "密码必须为6到12位"
                                },
                                {
                                    type: 'email_address',
                                    value: _self.registInputList.email_address,
                                    message: "无效邮箱"
                                },
                                {
                                    type: 'phone_num',
                                    value: _self.registInputList.phone_num,
                                    message: "电话格式错误"
                                }
                            ];
                            if(_self.GLOBAL.regxSuccess(regxArray)===true) {
                                // 调用注册的接口
                                _self.$http({
                                    method: 'post',
                                    url: 'registered',
                                    data: _self.registInputList
                                }).then(response => {
                                    console.log(response);
                                    if(response.data.code === 0) {
                                        // 注册成功
                                        let userId = response.data.data.user_id;
                                        localStorage.userId = userId;
                                        console.log(localStorage.userId)
                                        _self.successFlag = true;
                                        //提交成功后跳转页面
                                        setTimeout(function(){
                                            window.location.href="./#/dev_main/order_type/0";
                                        },1500);
                                    } else {
                                        _self.warnning.tag = true;
                                        _self.warnning.message = response.data.msg;
                                    }
                                })
                            } else {
                                //提示格式错误信息
                                _self.warnning = _self.GLOBAL.regxSuccess(regxArray);
                            };
                        }
                    }

                }
                
            }
        }
    }
</script>

<style>
    .margin-1 {
        margin: 1rem;
    }
    .radio-style {
        height: 1rem;
        width: 1rem;
        vertical-align: middle;
    }
    .radio-lable-style {
        vertical-align: middle;
        padding: 0 .3rem;
    }
</style>